/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<template>
    <div class="base-form">
        <div class="base-form__name">
            <sf-fieldlabel show-required :label-width="160" label-align="top">任务名称</sf-fieldlabel>
            <sf-textfield ref="nameInputRef" v-model="jobName" :max-length="200" :default-width="880" :allow-blank="false"/>
        </div>
        <div class="base-form__cluster">
            <sf-fieldlabel :label-width="60" label-align="top">执行集群</sf-fieldlabel>
            <div class="base-form__cluster__card">
                <div class="cluster-card__left">
                    <img src="../../img/jiqun.png" alt="">
                    <lang>GeniusAI 数据计算集群</lang>
                </div>
                <div class="cluster-card__right">
                    <div class="card-right__title">
                        <lang>描述：</lang>
                    </div>
                    <div class="card-right__description">
                        <lang>GeniusAI平台为用户提供的处理大规模数据任务的公共计算集群</lang>
                    </div>
                    <div class="card-right__detail">
                        <lang class="runningJobs point">处理中 {{ runningJobs }}/{{ runningLimit }}</lang>
                        <lang class="queueJobs point">排队中 {{ queueJobs }}</lang>
                    </div>
                </div>
            </div>
        </div>
        <div class="base-form__environment">
            <sf-fieldlabel :label-width="60" label-align="top">执行环境</sf-fieldlabel>
            <div class="form-environment__img">
                <img src="../../img/spark.png" alt="">
            </div>
        </div>
    </div>
</template>

<script>
const QUEUE_STATE = '/task-manage/api/v1/jobs/queue/state'
export default {
    name: "BaseForm",
    data() {
        return {
            jobName: this.$store.state.task.form.jobName,
            runningJobs: 0,
            queueJobs: 0,
            runningLimit:0
        }
    },
    async mounted() {
        let jsonData = await this.$ajax.get(QUEUE_STATE);
        let {success, data} = jsonData;
        if (!success) {
            return;
        }
        this.runningJobs = data.runningJobs;
        this.queueJobs = data.queueJobs;
        this.runningLimit = data.runningLimit;
    },
    methods: {
        getJsonValue(){
            return {
                jobName:this.jobName,
            }
        },
        isValid() {
            if(this.$refs.nameInputRef.validate()) {
                return true
            }
            // this.$warn(this.$refs.nameInputRef.getErrors()[0],{ autoHide: true })
            return false
        }
    }
}
</script>

<style scoped lang="less">
.base-form {
    display: flex;
    flex-direction: column;
    align-items: center;

    &__name {
        /deep/ .sfv-fieldlabel {
            .sfv-fieldlabel-content--required {
                padding-left: 10px;
            }

            .sfv-fieldlabel-content--required::before {
                top: 3px;
            }
        }
    }

    &__cluster {
        margin-top: 20px;

        &__card {
            width: 880px;
            height: 152px;
            border-radius: 4px;
            background-color: #F2F3F5;
            display: flex;

            .cluster-card__left {
                width: 25%;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;

                img {
                    width: 72px;
                    height: 72px;
                }

                span {
                    margin-top: 24px;
                    font-size: 16px;
                    font-weight: 500;
                    color: #666666;
                }
            }

            .cluster-card__right {
                display: flex;
                flex-direction: column;
                justify-content: center;
                margin: 0 auto;

                .card-right__title {
                    font-size: 16px;
                    font-weight: 500;
                    color: #666666;
                }

                .card-right__description {
                    font-size: 16px;
                    font-weight: normal;
                    color: #999999;
                    margin: 24px 0;
                }

                .card-right__detail {
                    font-size: 16px;
                    font-weight: normal;
                    color: #999999;
                    .point::before {
                        content: "";
                        width: 8px;
                        height: 8px;
                        border-radius: 100%;
                        display: inline-block;
                        margin-bottom: 2px;
                        margin-right: 12px
                    }

                    .runningJobs::before {
                        background-color: #FF3021;
                    }

                    .queueJobs {
                        margin-left: 40px;
                    }
                    .queueJobs::before {
                            background-color: #165DFF;
                    }
                }
            }
        }
    }

    &__environment {
        margin-top: 20px;
        .form-environment__img {
            width: 880px;
         img{
             margin:10px 18px 7px 20px;
         }
        }
    }
}
</style>
